<template>
  <!-- 题组弹出层 -->
  <el-dialog
    class="question-detail"
    width="70%"
    title="题目预览"
    :visible.sync="dialogTableVisible"
    :before-close="handleClose"
  >
    <!-- 标题 -->
    <div class="title">
      <div class="eleo-harde">
        【题型】 : {{ answerDetailData.questionType | formatType }}
      </div>
      <div class="eleo-harde">【编号】 : {{ answerDetailData.id }}</div>
      <div class="eleo-harde">
        【难度】 : {{ answerDetailData.difficulty | formatDifficulty }}
      </div>
      <div class="eleo-harde">【标签】 : {{ answerDetailData.tags }}</div>

      <div class="eleo-harde">
        【学科】 : {{ answerDetailData.subjectID | formatSubject }}
      </div>
      <div class="eleo-harde">
        【目录】 : {{ answerDetailData.catalogID | formatCatalog }}
      </div>
      <div class="eleo-harde">【方向】 : {{ answerDetailData.direction }}</div>
    </div>
    <!-- / 标题 -->
    <!-- 主题 -->
    <div class="body">
      <p class="body-title">【题干】:</p>
      <div v-html="answerDetailData.question" class="question"></div>
      <div>{{ answerDetailData.questionType | formatQuestionTypeText }}</div>
      <div class="option-set" v-if="answerDetailData.questionType == 1">
        <el-radio
          class="radioBtn"
          :value="option.isRight | formatRadioIndex(index)"
          :label="index"
          v-for="(option, index) in answerDetailData.options"
          :key="index"
          >{{ option.title }}</el-radio
        >
      </div>
      <div class="option-set" v-else-if="answerDetailData.questionType == 2">
        <el-checkbox
          class="radioBtn"
          :checked="option.isRight | formatCheckboxIndex"
          :label="index"
          v-for="(option, index) in answerDetailData.options"
          :key="index"
          >{{ option.title }}</el-checkbox
        >
      </div>
    </div>
    <!-- / 主题 -->
    <!-- 参考答案 -->
    <div class="answer">
      <div class="answer-title">
        <span>【参考答案】: </span
        ><el-button class="videoBtn" type="danger" @click="loadVideo"
          >视频答案预览</el-button
        >
      </div>
      <div class="video-container">
        <!-- <video v-if="isVideoShow" :src="answerDetailData.videoURL"></video> -->
        <video
          v-if="isVideoShow"
          :src="answerDetailData.videoURL"
          width="100%"
          height="100%"
          class="aticer"
          preload="none"
          autoplay="autoplay"
          controls="controls"
        ></video>
      </div>
    </div>
    <!-- / 参考答案 -->
    <!-- 答案解析 -->
    <div class="reference">
      <div>【答案解析】:</div>
      <div v-html="answerDetailData.answer"></div>
    </div>
    <!-- / 答案解析 -->
    <!-- 题目备注 -->
    <div class="remarks">
      <div>【题目备注】:</div>
      <div>{{ answerDetailData.remarks }}</div>
      <!-- 右下角关闭按钮 -->
      <el-button class="close" type="primary" @click="handleClose">关闭</el-button>
      <!-- / 右下角关闭按钮 -->
    </div>
    <!-- 题目备注 -->

    <!-- / 题组弹出层 -->
  </el-dialog>
</template>

<script>
export default {
  name: "QuestionsPreview",
  data() {
    return {
      // checked: true,
      isVideoShow: false, //视频显示
    };
  },
  props: {
    //弹窗信息的对象
    answerDetailData: {
      type: Object,
      required: true,
    },
    //弹窗显示
    dialogTableVisible: {
      type: Boolean,
      required: true,
    },
  },
  filters: {
    //将服务器传回的数字数据转换成文字
    formatType(val) {
      if (val == 1) {
        return "单选题";
      } else if (val == 2) {
        return "多选题";
      } else {
        return "简答题";
      }
    },
    formatDifficulty(val) {
      if (val == 1) {
        return "简单";
      } else if (val == 2) {
        return "一般";
      } else {
        return "困难";
      }
    },
    formatSubject(val) {
      if (val == 1) {
        return "java";
      } else {
        return "前端";
      }
    },
    formatCatalog(val) {
      if (val == 4) {
        return "java基础";
      } else if (val == 5) {
        return "前端基础";
      } else if (val == 6) {
        return "前端WEB";
      } else if (val == 7) {
        return "VUE框架";
      } else if (val == 8) {
        return "jQuery基础";
      } else if (val == 1) {
        return "java数据库";
      } else if (val == 2) {
        return "Spring";
      } else {
        return "java基础";
      }
    },
    formatQuestionTypeText(val) {
      if (val == 1) {
        return "单选题 选项：（以下选中的选项为正确答案）";
      } else if (val == 2) {
        return "多选题 选项：（以下选中的选项为正确答案）";
      } else {
        return "";
      }
    },
    formatRadioIndex(val, index) {
      // console.log('val=',val,'index=',index);
      if (val == 1) {
        return index;
      } else {
        return false;
      }
    },
    formatCheckboxIndex(val) {
      // console.log(val);
      if (val == 1) {
        return true;
      } else {
        return false;
      }
    },
  },
  created() {
    // this.initRadioIndex()
  },
  methods: {
    handleClose() {
      // console.log("close");
      //关闭弹窗，并销毁视频组件
      this.$emit("close");
      this.isVideoShow = false;
    },
    loadVideo() {
      //视频按钮绑定事件
      this.isVideoShow = !this.isVideoShow;
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.question-detail {
  font-size: 14px;
  color: #606266;
  .title {
    // width: 900px;
    height: 75px;
    border-bottom: 1px solid #606266;
    .eleo-harde {
      float: left;
      width: 25%;
      margin-bottom: 20px;
      max-width: 25%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .body {
    margin-top: 20px;
    border-bottom: 1px solid #606266;
    .option-set:last-child {
      margin-bottom: 20px;
    }
    .question {
      color: blue;
    }
    .radioBtn {
      display: block;
      margin-top: 20px;
    }
  }
  .answer {
    margin-top: 10px;
    border-bottom: 1px solid #606266;
    .answer-title {
      margin-bottom: 10px;
    }
    .video-container {
      video {
        width: 400px;
        height: 300px;
      }
    }
  }
  .reference {
    div {
      display: inline-block;
      margin: 5px 0;
    }
    border-bottom: 1px solid #606266;
  }
  .remarks {
    margin-top: 10px;
    margin-bottom: 60px;
    div {
      display: inline-block;
      margin: 5px 0;
    }
    .close {
      float: right;
      margin-top: 50px;
    }
  }
}
</style>
